<template>
  <div class="newCard">
    <p class="titleadd">新增设备</p>
    <div class="cardmsg">
      <!--:inline="true"  -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="addForm"
        :inline="true"
      >
        <el-form-item label="选择小区" prop="CID">
          <el-select v-model="ruleForm.CID" filterable placeholder="请选择" clearable>
            <el-option
              v-for="item in villageList"
              :key="item.CID"
              :label="item.name"
              :value="item.CID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="deviceType" label="设备型号">
          <el-select v-model="ruleForm.deviceType" placeholder="请选择" clearable>
            <el-option
              v-for="item in typelist"
              :key="item.DID"
              :label="item.name"
              :value="item.DID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="进出方向" prop="direction">
          <el-select v-model="ruleForm.direction" filterable placeholder="请选择" clearable>
            <el-option
              v-for="item in addressType"
              :key="item.val"
              :label="item.name"
              :value="item.val"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备Id" prop="sn">
          <el-input v-model="ruleForm.sn" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="ruleForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备位置" prop="location">
          <el-input v-model="ruleForm.location" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="validateCode">
          <el-input v-model="ruleForm.validateCode" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-input v-model="ruleForm.longitude" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="ruleForm.latitude" auto-complete="off"></el-input>
        </el-form-item>
        <div id="map_box_edit" style="width: 100%; height: 500px"></div>
        <p>当前鼠标经纬度：{{ move }}</p>
        <el-form-item>
          <el-button @click="canaelSumbit">返回</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')" type="warning" plain>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addressType: [
        { val: '35', name: '进' },
        { val: '36', name: '出' },
      ],
      // 小区列表
      villageList: [],
      // 楼栋列表
      loudonglist: [],
      // 单元列表
      unitlist: [],
      // 查询的人员列表
      loadper: true,
      listPer: [],
      dictList: {},
      typelist: {},
      // 查询到的人员
      // 绑定的人员
      changeper: {
        person_id: "",
        pername: ""
      },
      // 人员类型
      persontypelist: [],
      move: "",
      ruleForm: {
        CID: "", //小区CID
        longitude: "",
        latitude: "",
        deviceType: "",
        sn: "",
        name: "",
        location: "",
        direction: "",
        validateCode: "",
      },
      rules: {
        CID: [{ required: true, message: "小区不能为空", trigger: "blur" }],
        deviceType: [{ required: true, message: "必填项", trigger: "blur" }],
        sn: [{ required: true, message: "必填项", trigger: "blur" }],
        name: [{ required: true, message: "必填项", trigger: "blur" }],
        location: [{ required: true, message: "必填项", trigger: "blur" }],
        direction: [{ required: true, message: "必填项", trigger: "blur" }],
        longitude: [{ required: true, message: "必填项", trigger: "blur" }],
        latitude: [{ required: true, message: "必填项", trigger: "blur" }],
      }

    };
  },

  mounted() {
    this.getmap();
    this.getCommunityList();
    let dictList = JSON.parse(sessionStorage.getItem("dictData"));
    this.typelist = dictList.sys_facedevice_type;
  },

  methods: {
    getmap() {
      // 初始化地图
      // 初始化地图
      // 定义局部变量 userinfo 赋值为 storage里面的 userinfo
      var userInfo = JSON.parse(sessionStorage.getItem("userInfo")); // 定义中心点变量 center 赋值为空数组
      var center = []; // 增加if判断 括号里面判断条件为 userinfo里面的 经度存在 并且 纬度也存在
      if (userInfo.longitude && userInfo.latitude) {
        center = [userInfo.longitude, userInfo.latitude];
      } else {
        center = [104.06667, 30.66667];
      }
      var map = new AMap.Map("map_box_edit", {
        zoom: 10,
        resizeEnable: true,
        resizeEnable: true,
        center: center,
      });
      map.plugin(["AMap.ToolBar"], function () {
        // 组件初始化成功 new 工具条组件对象 这里根据官方规定 定义 AMap.ToolBar 的组件
        var tool = new AMap.ToolBar();
        // 地图中添加工具条  map 是前面定义的地图对象 通过 组件内部的 addControl 方法 （官方定义） 添加tool这个变量 即工具条
        map.addControl(tool);
      });

      let clickFunc = (e) => {
        // 如果已存在 移除已创建的 marker
        if (this.marker) map.remove(this.marker);
        this.ruleForm.longitude = e.lnglat.getLng();
        this.ruleForm.latitude = e.lnglat.getLat();
        // 创建一个 Marker 实例：
        this.marker = new AMap.Marker({
          position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          // 设置是否可以拖拽
          draggable: true,
          cursor: "move",
          // 设置拖拽效果
          raiseOnDrag: true,
        });
        // 拖动结束事件
        this.marker.on("dragend", (e) => {
          this.ruleForm.longitude = e.lnglat.getLng();
          this.ruleForm.latitude = e.lnglat.getLat();
        });
        // 将创建的点标记添加到已有的地图实例：
        map.add(this.marker);
      };
      // 编辑第一次进入 回显图标到地图上
      if (this.ruleForm.longitude && this.ruleForm.latitude) {
        map.setCenter(
          new AMap.LngLat(this.ruleForm.longitude, this.ruleForm.latitude)
        );
        this.marker = new AMap.Marker({
          position: new AMap.LngLat(
            this.ruleForm.longitude,
            this.ruleForm.latitude
          ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          // 设置是否可以拖拽
          draggable: true,
          cursor: "move",
          // 设置拖拽效果
          raiseOnDrag: true,
        });
        // 拖动结束事件
        this.marker.on("dragend", (e) => {
          this.ruleForm.longitude = e.lnglat.getLng();
          this.ruleForm.latitude = e.lnglat.getLat();
        });
        map.add(this.marker);
      }
      let moveFunc = (e) => {
        this.move =
          "经度：" + e.lnglat.getLng() + "," + "纬度：" + e.lnglat.getLat();
      };
      map.on("click", clickFunc);
      map.on("mousemove", moveFunc);
    },
    // 表单提交
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            let params = Object.assign({}, this.ruleForm);
            this.$api.wxNotic.sys_facedevice_save(params).then((res) => {
              this.editLoading = false;
              if (res.code == 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
                // this.closedialog();
                this.$emit('closeAddequ')
                // this.$emit("retList");
              } else {
                this.$message({
                  message: "操作失败, " + res.msg,
                  type: "error",
                });
              }
            });
          });
        }
      });
    },
    // // 关闭
    // closedialog() {
    //   this.$router.push("/resource/AddEquipment");
    // },
    // 小区查询
    getCommunityList() {
      this.villageList = this.$store.state.village.villageList;
    },

    changper(val) {
      //   console.log(val, "显示的数据");
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 返回
    canaelSumbit() {
      this.$emit("retList");
    }
  }
};
</script>

<style lang="scss" scoped>
.newCard {
  .titleadd {
    line-height: 50px;
    padding: 0 20px;
    border-left: 5px solid rgb(30, 175, 243);
    margin-bottom: 30px;
  }
}
.addForm {
  margin: 0 auto;
  width: 94%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  .el-form-item {
    width: 30%;
    margin-bottom: 60px;
    height: 40px;
    // min-width: 360px;
    &:nth-last-child(1) {
      width: 90%;
      text-align: center;
    }
    // &:nth-last-child(2) {
    //   width: 90%;
    // }
  }

  .el-form-item__content {
    width: 100%;
    .el-cascader {
      width: 330px;
    }
    .el-select {
      width: 330px;
    }
    .el-input {
      //   min-width: 300px;
      width: 330px;
      //   background: aqua;
    }
  }
  .el-form--inline .el-form-item__content {
    width: 300px !important;
  }
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.swictbtn {
  margin-right: 20px;
}
</style>
